<template>
  <div class="container align-c">
    <div>
      <img class="width-102 height-94" v-if="fileSpace" :src="fileSpace + imgUrl" alt="">
    </div>
    <div class="font-20 font-color-3 align-c font-w">
      <span>{{msg}}</span>
      <span>￥{{price}}</span>
    </div>
    <div class="font-12 font-color-6 flex-col mar-t-20">
      <span>订单编号：{{orderData.orderNo}}</span>
      <span class="mar-t-10">下单时间：{{ orderData.createTime }}</span>
      <span class="mar-t-10" v-if="orderData.payTime">支付时间：{{ orderData.payTime }}</span>
    </div>
    <div class="font-14 btn-group flex-col font-w">
      <div class="detail-btn" @click="orderDetail" v-if="successFlag === '1'">
        订单详情
      </div>
      <div class="mar-t-20" :class="successFlag === '1' ? 'home-btn':'detail-btn'" @click="$pt.reLaunch({url: '/pages/home/main'})">
        返回首页
      </div>
    </div>
    <!-- <div class="head-bar">
      <div class="bc-color-box"></div>
      <div class="tips-box">
        <img class="width-40 height-40" v-if="fileSpace && successFlag === '1'" :src="fileSpace + '/images/success-icon-white.png'" alt="">
        <img class="width-40 height-40" v-if="fileSpace && successFlag === '0'" :src="fileSpace + '/images/fail-icon-white.png'" alt="">
        <div class="font-18 font-white font-w mar-l-15">{{ msg }}</div>
      </div>
      <div class="info-box">
        <div class="info-content">
          <div class="info-pay font-30 font-w mar-b-18">
            <span class="font-16">￥</span> {{ price }}
          </div>
          <div class="mar-b-10 font-13 font-color-6">
            订单编号：<span class="font-color">{{ orderData.orderNo }}</span>
          </div>
          <div class="mar-b-10 font-13 font-color-6">
            下单时间：<span class="font-color">{{ orderData.createTime }}</span>
          </div>
          <div class="mar-b-10 font-13 font-color-6" v-if="orderData.payTime">
            支付时间：<span class="font-color">{{ orderData.payTime }}</span>
          </div>                
        </div>
      </div>
    </div> -->
    <!-- 订单商品类型： 10：微店商品快递配送 11： 微店商品门店自提 20: 分销商品快递配送 30:微店商品+分销商品快递配送 -->
    <!-- <div class="button-box font-15 flex flex-between" v-if="type === '10' || type === '20'">
      <button class="home" @click="$pt.reLaunch({url: '/pages/home/main'})">回到首页</button>
      <button class="details" @click="orderDetail">订单详情</button>        
    </div>
    <div class="button-box font-15 flex flex-between" v-if="type === '11'">
      <button class="home" @click="$pt.reLaunch({url: '/pages/home/main'})">回到首页</button>
      <button class="details" v-if="successFlag === '1'"
        @click="$pt.redirectTo({url: '/pages/personal/cancellation-desk/customer-details/main?orderId=' + orderId })">取货码</button>
    </div> -->
    <div class="coupon-wrap" v-if="couponList.length !== 0">
      <div class="division-row">
        <div class="division-title">恭喜您获得<span>{{couponList.length}}张</span>优惠券</div>
      </div>
      <div class="list">
        <div v-for="(item, index) in couponList" :key="index" class="mar-b-15">
          <coupon v-if="item" :coupon="item" :showExpend="false" :actionId="item.actionId" @click="linkCoupon"></coupon>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Coupon from '@/components/Coupon'
import { getOrder } from '@/api/shop'
import { getProjectOrder } from '@/api/distribution'
import { listPaidOrderCoupon, doReceive } from '@/api/personal'
export default {
  components: { Coupon },
  data() {
    return {
      iconClass: '',
      successFlag: '',
      price: '',
      msg: '',
      imgUrl: '',
      type: '',
      orderId: '',
      orderData: {},
      fastGoods: [],
      expend: false,
      couponList: [],
      doReceiveParams: {
        couponId: '',
        customerMemberId: '',
        actionId: ''
      }
    }
  },
  onLoad() {
    this.$pt.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#FF243D'
    })
  },
  onShow() {
    this.successFlag = this.getCurrentPage().query.successFlag
    this.imgUrl = this.successFlag === '1' ? '/images/pay-success1.png' : '/images/pay-fail.png'
    this.price = this.getCurrentPage().query.price
    this.type = this.getCurrentPage().query.resType
    this.orderId = this.getCurrentPage().query.orderId
    if (this.successFlag === '1') {
      this.msg = '支付成功'
      this.listPaidOrderCoupon()
    } else {
      this.msg = '支付失败'
    }
    this.$pt.setNavigationBarTitle({
      title: this.msg
    })
    this.orderInfo()
    // console.log(this.orderId)
    // console.log(this.type, typeof this.type)
  },
  methods: {
    linkCoupon(item) {
      if (!this.getShowBuyCard) return
      this.$pt.navigateTo({url: '/pages/personal/coupon/suit-goods/main?couponId=' + item.couponId + '&actionId=' + item.actionId})
    },
    orderDetail() {
      if (this.type === '10') {
        this.$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + this.orderId + '&detail=' + true + '&orderType=' + this.orderData.deliveryType })
      } else if (this.type === '20') {
        this.$pt.navigateTo({ url: '/pages/personal/distribution/order/detail/main?orderId=' + this.orderId + '&personalType=0&orderFrom=2&detail=' + true + '&orderType=' + this.orderData.deliveryType })
      }
    },
    orderInfo() {
      // 订单商品类型： 10：微店商品快递配送 11： 微店商品门店自提 20: 分销商品快递配送 30:微店商品+分销商品快递配送
      this.orderData = {}
      if (this.type === '10' || this.type === '11') {
        getOrder(this.orderId).then((response) => {
          if (response.isError) return
          this.orderData = response.data
        }).catch(() => {
        })
      } else if (this.type === '20') {
        getProjectOrder(this.orderId).then((response) => {
          if (response.isError) return
          this.orderData = response.data
        }).catch(() => {
        })
      }
    },
    listPaidOrderCoupon() {
      listPaidOrderCoupon({orderId: this.orderId}).then(response => {
        if (response.isError) return
        this.couponList = []
        response.data.forEach(item => {
          if (item.validTimeType === 1) {
            item.validStartTime = item.validStartTime.split(' ')[0]
            item.validEndTime = this.isToday(item.validEndTime)
          }
          if (item.cashAmount) {
            item.priceLength = item.cashAmount.toString().length
            // item.cashAmount = parseFloat(item.cashAmount)
          }
          if (item.reduceAmount) {
            item.priceLength = item.reduceAmount.toString().length
            // item.reduceAmount = parseFloat(item.reduceAmount)
          }
          if (item.discountPercent) item.discountPercent = parseFloat(item.discountPercent)
          item.expend = false
          this.couponList.push(item)
        })
      }).catch(() => {
      })
    },
    isToday(date) {
      let today = new Date().toLocaleDateString()
      let tsDate = date.split(' ')[0].replace(/-/g, '/')
      if (new Date(tsDate).getTime() === new Date(today).getTime()) return 'today'
      return date.split(' ')[0]
    },
    doReceive(value) {
      // 领取优惠券
      this.doReceiveParams.couponId = value.couponId
      this.doReceiveParams.customerMemberId = this.getCustomerId
      this.doReceiveParams.actionId = value.actionId || ''
      doReceive(this.doReceiveParams).then(response => {
        if (response.isError) return
        this.$utils.showToast({title: '领取成功'})
        value.receiveStatus = 1
        let dataclone = this.$utils.deepClone(this.couponList)
        this.couponList = dataclone
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
@color-green: #20b675;
@light-orange: #FF593E;
@drak-orange: #EC3B1F;
.container {
  padding-top: 35px;
  .btn-group {
    margin-top: 65px;
    text-align: center;
    &>div{
      width: 242px;
      border-radius: 24px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .detail-btn {
      background: #FF243D;
      color: #fff;
    }
    .home-btn {
      color: #FF243D;
      border:1px solid #FF243D;
      background: #fff;
      box-sizing: border-box;
    }
  }
}
.head-bar{
  position: relative;
  background-size: 100% 30%;
  .bc-color-box{
    position: absolute;
    top: 0;
    left: 0;
    background: #24ba75;
    height: 160px;
    width: 100%;
  }
  .tips-box{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 36px;
  }
  .info-box{
    position: relative;
    width: 100%;
    .info-content{
      position: relative;
      background: url('https://veekrayimg.joinsun.vip/images/pay-success-img.png');
      background-size: 90% 100%;
      background-repeat: no-repeat;
      background-position-x: 50%;
      padding: 0 45px;
      min-height: 245px;
      .info-pay{
        padding: 40px 0 18px 0;
        border-bottom: 1px dashed #94a09b;
        text-align: center;
      }
    }
  }
}
.button-box{
  margin-top: 35px;
  button{
    width: 150px;
    height: 42px;
    border: 1px solid @color-green;
    box-sizing: border-box;
    color: @color-green;
    background: white;
    line-height: 42px;
    text-align: center;
    border-radius: 20px;
    &::after{
      border: unset;
    }
  }
  .details{
    color: white;
    background: @color-green;
  }
}
.coupon-wrap{
  .coupon-num{
    color: @drak-orange;
  }
  .division-row{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px;
    color: #666666;
    &::before{
      content: '';
      width: 30px;
      height: 1px;
      background: #666666;
    }
    &::after{
      content: '';
      width: 30px;
      height: 1px;
      background: #666666;
    }
    .division-title{
      font-size: 14px;
      margin: 0 20px;
    }
  }
  .list{
    padding: 15px 15px 0;
    &__item{
      width: 345px;
      border-radius: 8px;
      display: flex;
    }
    &__wrap{
      position: relative;
      width: 100%;
      min-height: 115px;
      filter: drop-shadow(0px 0px 10px rgba(155, 155, 155, 0.11));
    }
    &__content{
      display: flex;
      width: 100%;
      height: 115px;
      background: radial-gradient(circle at right top, transparent 6px, #fff 0) top left / 105px 51% no-repeat,
        radial-gradient(circle at right bottom, transparent 6px, #fff 0) bottom left / 105px 51% no-repeat,
        radial-gradient(circle at left top, transparent 6px, #fff 0) top right / 241px 51% no-repeat,
        radial-gradient(circle at left bottom, transparent 6px, #fff 0) bottom right / 241px 51% no-repeat;
      border-radius: 8px;
      position: relative;
    }
    &__border{
      width: 4px;
      height: 115px;
      position: relative;
      left: 0;
      top: 0;
      background-color: @light-orange;
    }
    &__left{
      display: flex;
      border-radius: 8px 0 0 8px;
      overflow: hidden;
    }
    &__coupon-wrap{
      width: 94px;
      padding-right: 6px;
      height: 100%;
      color: @light-orange;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    &__arrow--bottom{
      position: absolute;
      bottom: 5px;
      right: 10px;
    }
    &__coupon-price{
      display: flex;
      align-items: flex-end;
    }
    &__price{
      font-size: 36px;
      font-weight: bold;
    }
    &__price-small{ 
      font-size: 32px;
    }
    &__right{
      padding: 0 10px 0 15px;
      height: 100%;
      display: flex;
      justify-content: space-between;
    }
    &__coupon-content{
      line-height: 1;
      height: 100%;
      width: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    &__collect--no{
      width: 50px;
      height: 22px;
      line-height: 22px;
      background-color: @light-orange;
      color: #fff;
      font-size: 12px;
      text-align: center;
      margin-top: 30px;
      border-radius: 11px;
    }
    &__expend{
      background: white;
      margin-left: 4px;
      width: calc(100% - 4px);
      border-radius:  0 0 8px 8px;
      margin-top: -7px;
      height: 0px;
      overflow: hidden;
      line-height: 1;
      transition: all .5s;
      position: relative;
    }
    &__expend--true{
      height: auto;
      &::before{
        content: '';
        position: absolute;
        top: 7px;
        width: calc(100% - 28px);
        left: 14px;
        border-top: 0.5px dashed rgba(255, 89, 62, 0.5);
      }
    }
    &__ul{
      font-size: 12px;
      padding: 0 10px;
      line-height: 1;
      margin-top: 23px;
      li{
        display: flex;
        align-items: center;
        margin-bottom: 9.5px;
        &:last-child{
          margin-bottom: 13px;
        }
        .round-point{
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background-color: #333333;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
